body {
    line-height: 1;
    background-color: #f4f5fa; 
}
.header{
    height: 7.5rem;
    .invitation-bg{
        background: url("../images/ban@2x.png");
        height:5.49rem;
        width: 100%;
        background-size: cover;
        position: relative;
        .my-invitation{
            width: 9.2rem;
            height: 3.36rem;
            background: #fff;
            border-radius: .11rem;
            position: absolute;
            left: 0.4rem;
            top: 4.17rem;
            padding-right: 0.4rem;
            .invitation-title{
                margin: 0.4rem 0rem 0.47rem 0rem;
                height: 0.43rem;
                line-height: 0.43rem;
                width: 100%;
                h4{
                    height:0.35rem;
                    font-size:0.35rem;
                    color:rgba(51,51,51,1);
                    line-height:0.35rem;
                    font-weight: bold;
                    border-left: 0.09rem solid #dc3838;
                    padding-left: 0.3rem;
                    float: left;                    
                }
                span{
                    font-size:0.35rem;
                    color:rgba(102,102,102,1);
                    float: right;
                    a{
                    font-size:0.35rem;
                    color:rgba(102,102,102,1);
                        i{
                            background: url("../images/icon_go_nor@2x.png");
                            background-size: cover;
                            width:0.13rem;
                            height:0.24rem;
                            display: inline-block;
                            margin-left: 0.16rem;
                        }                        
                    }

                }
            }
            .invitation-content{
                margin-left: 0.4rem;
                border-top: 0.01rem solid #E5E5E5;
                padding-top: 0.53rem;
                .pro-content{
                    float: left;
                    width: 50%;
                    text-align: center;
                    border-right: 0.01rem solid #E5E5E5;
                    &:last-child{
                        border-right: 0;
                    }
                    .pro-content-red{
                        color:rgba(220,56,56,1);
                    }
                    .pro-content-ccc{
                        color:#333;
                    }
                    p{
                        font-size:0.32rem;
                        color:rgba(153,153,153,1);  
                        &:first-child{
                        font-size:0.48rem;
                        margin-bottom: 0.29rem;                            
                        }                      
                    }
                }
            }
        }    
    }
}
// 赚钱攻略
.strategy{
    width:9.2rem;
    height:8.05rem;
    background:rgba(255,255,255,1);
    border-radius: 0.11rem;
    margin: 0.4rem;
    display: inline-block;
    .strategy-title{
        height: 0.43rem;
        line-height: 0.43rem;
        width: 100%;
        margin: 0.4rem 0;
        h4{
            height:0.35rem;
            font-size:0.35rem;
            color:rgba(51,51,51,1);
            line-height:0.35rem;
            font-weight: bold;
            border-left: 0.09rem solid #dc3838;
            padding-left: 0.3rem;
            float: left;                    
        }        
    }
    .strategy-content{
        .strategy-item{
            padding: 0 0.4rem;
            margin-bottom: 0.44rem;
            &:nth-child(2){
                margin-bottom: 0;
            }
            .item-left{
                float: left;
                margin-right: 0.2rem;
                position: relative;
                top: -0.4rem;
                span{
                    width:1.44rem;
                    height:0.51rem;
                    line-height: 0.51rem;
                    text-align: center;
                    background:rgba(183,164,221,1);
                    border-radius: 0.25rem ;  
                    font-size:0.32rem;
                    color:rgba(255,255,255,1);     
                    display: inline-block    
                }     
            }
            .item-right{
                font-size:0.35rem;
                color:rgba(51,51,51,1);
                line-height:0.59rem;
                i{
                    background: url("../images/icon_more_nor@2x.png");
                    width:0.57rem; 
                    height:0.13rem;
                    background-size: cover;
                    display: inline-block;
                    margin: 0rem 0.2rem;
                }              
            }
        }
        .strategy-code{
            width:3.36rem;
            height:3.36rem; 
            margin: auto;
            margin-top: 0.2rem;   
            img{
                width: 100%;
                height: 100%;
            }        
        }
    }
}
// 奖励
.reward{
    width:9.2rem;
    height:6.69rem;
    background:rgba(255,255,255,1);
    border-radius: 0.11rem ; 
    display: inline-block;
    margin: 0 .4rem;
    .reward-title{
        height: 0.43rem;
        line-height: 0.43rem;
        width: 100%;
        margin: 0.4rem 0;
        h4{
            height:0.35rem;
            font-size:0.35rem;
            color:rgba(51,51,51,1);
            line-height:0.35rem;
            font-weight: bold;
            border-left: 0.09rem solid #dc3838;
            padding-left: 0.3rem;
            float: left;                    
        }        
    }
    .reward-pro{
        margin: 0rem .19rem;
        .reward-pro-title{
            height:1.01rem;
            background:rgba(243,244,251,1);
            li{
                font-size:0.32rem;
                color:rgba(102,102,102,1);
                height: 100%;
                float: left;
                text-align: center;
                width: 20%;
                line-height: 1.01rem;            
            }
        }
        .reward-pro-item{
            .pro-item{
                height:1.01rem;
                background:rgba(232,234,245,1);
                &:nth-child(2n){
                    background: #F3F4FB;
                }                
                li{
                    font-size:0.32rem;
                    height: 100%;
                    float: left;
                    text-align: center;
                    width: 20%;
                    line-height: 1.01rem; 
                    color: #666;
                    &:nth-child(2),&:nth-child(3){
                        color: #333;
                    }
                    &:nth-child(4){
                        color:#FF6005;
                    }
                    &:nth-child(5){
                        color:#DC3838;
                    }
                }
            }
        }
    }
    .reward-more{
        font-size:0.37rem;
        color:rgba(220,56,56,1);  
        text-align: center;
        padding: 0.53rem 0rem;          
    }
}
// 规则
.rule{
    width:9.2rem;
    height:11.79rem;
    background:rgba(255,255,255,1);
    border-radius: 0.11rem ;
    display: inline-block;
    margin:.4rem; 
    .rule-title{
        height: 0.43rem;
        line-height: 0.43rem;
        width: 100%;
        margin: 0.4rem 0;
        h4{
            height:0.35rem;
            font-size:0.35rem;
            color:rgba(51,51,51,1);
            line-height:0.35rem;
            font-weight: bold;
            border-left: 0.09rem solid #dc3838;
            padding-left: 0.3rem;
            float: left;                    
        }        
    }
    .rule-content{
        margin: 0rem 0.5rem;
        p{
            font-size:0.37rem;
            color:rgba(102,102,102,1);
            line-height:0.56rem;     
            margin-bottom: 0.07rem;       
        }
    }    
}
// 弹窗
.reward-slide{
    position: fixed;
    pointer-events: auto;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: 0.4;
    z-index: 1;  
    display: none;  
}
.reward-slide-content{
    width: 100%;
    background: #fff;
    border-radius: .4rem .4rem 0 0;
    z-index: 2;
    position: fixed;
    bottom: 0;
    display: none;
    height: 14.63rem;
    .reward-title{
        height: 0.43rem;
        line-height: 0.43rem;
        width: 100%;
        margin: 0.4rem 0;
        h4{
            height:0.35rem;
            font-size:0.35rem;
            color:rgba(51,51,51,1);
            line-height:0.35rem;
            font-weight: bold;
            border-left: 0.09rem solid #dc3838;
            padding-left: 0.3rem;
            float: left;                    
        }  
        span{
            background: url("../images/icon_close_nor@2x.png");
            width:0.48rem;
            height:0.48rem; 
            background-size: cover;
            float: right;
            margin-right: 0.39rem;
            margin-top: -0.05rem
        }      
    }
    .reward-pro{
        margin: 0rem .61rem;
        overflow: hidden;
        width: 8.8rem;
        .reward-content{
            overflow-y: scroll;
            -webkit-overflow-scrolling : touch;
            height: 11.9rem;
            width: 9rem;
            .reward-pro-title{
                height:1.01rem;
                background:rgba(243,244,251,1);
                li{
                    font-size:0.32rem;
                    color:rgba(102,102,102,1);
                    height: 100%;
                    float: left;
                    text-align: center;
                    width: 20%;
                    line-height: 1.01rem;            
                }
            }
            .reward-pro-item{
                .pro-item{
                    height:1.01rem;
                    background:rgba(232,234,245,1);
                    &:nth-child(2n){
                        background: #F3F4FB;
                    }                
                    li{
                        font-size:0.32rem;
                        height: 100%;
                        float: left;
                        text-align: center;
                        width: 20%;
                        line-height: 1.01rem; 
                        color: #666;
                        &:nth-child(2),&:nth-child(3){
                            color: #333;
                        }
                        &:nth-child(4){
                            color:#FF6005;
                        }
                        &:nth-child(5){
                            color:#DC3838;
                        }
                    }
                }
            }            
        }

    } 
    .reward-close{
        width: 100%;
        height:1.44rem;
        background:rgba(255,255,255,1);   
        text-align: center;
        >button{
            width:9.2rem;
            height:1.07rem;
            background: -webkit-linear-gradient(left, #F64646 , #DC3838);
            background: -o-linear-gradient(right, #F64646 , #DC3838);
            background: -moz-linear-gradient(right,#F64646 , #DC3838);
            background: linear-gradient(to right,#F64646, #DC3838);
            border-radius: 0.53rem ;  
            font-size:0.4rem;
            color:rgba(255,255,255,1);          
        }     
    }
}
